<script lang="ts" setup>


//右边优秀公司列表
import {FireOutlined, SyncOutlined} from "@ant-design/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {pageJobAndEmployerAPI} from "@/apis/job.ts";
import {message} from "ant-design-vue";

interface DataItem {
  title: string;
}

const jobData: DataItem[] = [
  {
    title: 'Ant Design Title 1',
  },
  {
    title: 'Ant Design Title 2',
  },
  {
    title: 'Ant Design Title 3',
  },
  {
    title: 'Ant Design Title 4',
  },
];

//中间岗位列表
const count = 8;
const pageCurrent = ref(1);
const pageTotal = ref(0);
const initLoading = ref(true);
const data = <any>reactive([]);
const list = <any>reactive([]);

const getJobList = async () => {
  const res = await pageJobAndEmployerAPI({
    pageCurrent: pageCurrent.value,
    pageSize: count,
  });
  if (res.data.flag) {
    pageTotal.value = res.data.data.total;
    data.push(...res.data.data.data)
    list.push(...res.data.data.data)
    initLoading.value = false;
  } else {
    message.error(res.data.message)
  }
}


onMounted(() => {
  getJobList();
});


</script>

<template>
  <div class="jobseeker_suggest">
    <div class="main">
      <router-view></router-view>
    </div>
  </div>

</template>

<style scoped>
.jobseeker_suggest {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width:70%;
  height: 750px;
  background-color: #fff;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .left {
    border: 1px solid #ccc;
    width: 260px;
    height: auto;
    margin-right: 30px;

    .urgent_job {
      border: 1px solid red;
      width: 100%;
      height: auto;

      .right-title {
        border: 1px solid blue;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        height: auto;

        .title-item {
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
  }

  .main {
    display: flex;
    box-sizing: border-box; /* 确保边框不会增加额外宽度 */
    width: calc(100% - 540px);
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 20px;
    flex-grow: 1; /* 让 .main 元素占据剩余的空间 */
    height: 100%;


  }

  .right {
    border: 1px solid #ccc;
    width: 260px;
    height: 100%;
    margin-left: 30px;
    padding-left: 10px;
    padding-right: 10px;

    .urgent_job {
      border: 1px solid red;
      width: 100%;
      height: auto;

      .right-title {
        border: 1px solid blue;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        height: auto;

        .title-item {
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
  }


}
</style>
